<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="../d3-tip.css" />
    <style>
     
    </style>
  </head>
  <body>


    <script src="../d3.js"></script>
    <script src="../d3-v6-tip.js"></script>
    <script>

      const width = 800 ;
      const height = 600 ;
      const svg = d3
        .select("body")
        .append("svg")
        .attr("width", width)
        .attr("height", height)
        .style("border", "1px solid #ccc");


        svg.append('line')
          .attr('x1',50)
          .attr('y1',50)
          .attr('x2',50)
          .attr('y2',550)
          .attr('stroke','#ccc');

        svg.append('line')
          .attr('x1',750)
          .attr('y1',50)
          .attr('x2',750)
          .attr('y2',550)
          .attr('stroke','#ccc');  
        
        const g = svg.append('g').attr('transform','translate(50,50)');


        g.append('rect')
          .attr('x',0)
          .attr('y',0)
          .attr('width',0)
          .attr('height',30)
          .attr('fill','#acf')
          .transition()
          .duration(2000)
          .attr('width',600)


        g.append('text')
          .attr('x',10)  
          .attr('y',20)  
          .text('0px')  
          .transition()
          .duration(2000)
          .attr('x',610)
          //.text('610px')
          // .textTween(()=>{
          //   return d3.interpolateString('0px','610px');
          // })
          .textTween(()=>{
            return myInterpolate(0,610);
          })

          function myInterpolate(start , end){
              const interpolate = d3.interpolateRound(start,end);
              return function(t){
                return Math.round(start + (end-start)*t) + ' px'
                //return interpolate(t) + ' px';
              }
          }
          
    </script>
  </body>
</html>
